<style>

</style>
<template>
  <div class="app">
    <div class="a"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <div class="form-section">
        <h3>基础信息</h3>
        <el-form ref="form" :model="form" inline label-width="100px">
          <el-form-item label="运单状态">
            <el-input v-model="form.waybillStatus"></el-input>
          </el-form-item>
          <el-form-item class="input" label="运单号" prop="waybillNumber">
            <el-input v-model="form.waybillNumber"/>
          </el-form-item>
          <el-form-item label="始发地" prop="departure">
            <el-select v-model="form.departure" placeholder="请选择">
              <el-option label="河南" value="河南"></el-option>
              <el-option label="河北" value="河北"></el-option>
              <el-option label="石家庄" value="石家庄"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select v-model="form.destination" placeholder="请选择">
              <el-option label="北京" value="北京"></el-option>
              <el-option label="上海" value="上海"></el-option>
              <el-option label="广州" value="广州"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运输类型">
            <el-select v-model="form.transportMode" clearable placeholder="请选择">
              <el-option label="整车" value="整车"></el-option>
              <el-option label="零件" value="零件"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="form.orderCreateTime"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item><br>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="form.createdTime"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="input" label="创建人" prop="OrderID">
            <el-input v-model="form.createdBy"/>
          </el-form-item>
          <el-form-item label="最后更新时间">
            <el-date-picker
              v-model="form.createdTime"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="input" label="最后更新人" prop="OrderID">
            <el-input v-model="form.createdBy"/>
          </el-form-item>
        </el-form>
          </div>
        </div>

      <div class="b" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
            <h3>承运商</h3>
            <el-form ref="form" :model="form" inline label-width="100px">
              <el-form-item label="承运商名称">
                <el-input v-model="form.carrier" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="联系人姓名">
                <el-input v-model="form.driver" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="form.phoneNumber" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="司机姓名">
                <el-input v-model="form.driver" placeholder="请输入内容"/>
              </el-form-item><br>
              <el-form-item label="手机号码">
                <el-input v-model="form.phoneNumber" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="车型">
                <el-input v-model="form.vehicleType" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="车长">
                <el-input v-model="form.vehicleLength" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="车牌号">
                <el-input v-model="form.licensePlate" placeholder="请输入内容"/>
              </el-form-item>
            </el-form>
          </div>

    <div class="c" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>货物信息</h3>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="departure"
          label="始发地">
        </el-table-column>
        <el-table-column
          prop="destination"
          label="目的地">
        </el-table-column>
        <el-table-column
          prop="name"
          label="货物名称">
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="tj"
          label="体积(m3)">
        </el-table-column>
        <el-table-column
          prop="zl"
          label="重量(kg)">
        </el-table-column>
        <el-table-column
          prop="fentan"
          label="分摊运费(元)">
        </el-table-column>
        <el-table-column
          prop="zxf"
          label="装卸费(元)">
        </el-table-column>
        <el-table-column
          prop="bzf"
          label="包装费(元)">
        </el-table-column>
      </el-table>
<!--      总数量:{{20}}-->
<!--      <el-form ref="form" :model="form" inline label-width="100px">-->
<!--        <el-form-item label="总数量">-->
<!--          <el-input v-model="form.hunum"  placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="总体积">-->
<!--          <el-input v-model="form.ztj" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="总重量">-->
<!--          <el-input v-model="form.zl" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计费方式">-->
<!--          <el-input v-model="form.jsfs" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="运费成本">-->
<!--          <el-input v-model="form.yfhj" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="包装费">-->
<!--          <el-input v-model="form.baozhuangfei" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="装卸费">-->
<!--          <el-input v-model="form.zqf" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="其他费用">-->
<!--          <el-input v-model="form.qtfy" placeholder="请输入内容"/>-->
<!--        </el-form-item><br>-->
<!--        <el-form-item label="运费合计">-->
<!--          <el-input v-model="form.yfhj" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
    </div>
<!--    <div class="b" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">-->
<!--      <h3>付款方式</h3>-->
<!--      <el-form ref="form" :model="form" inline label-width="100px">-->
<!--        <el-form-item label="现付">-->
<!--          <el-input v-model="form.xf" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="预付">-->
<!--          <el-input v-model="form.yf" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="到付">-->
<!--          <el-input v-model="form.df" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="周期付">-->
<!--          <el-input v-model="form.zqf" placeholder="请输入内容"/>-->
<!--        </el-form-item><br>-->
<!--        <el-form-item label="付费合计">-->
<!--          <el-input v-model="form.ffhj" placeholder="请输入内容"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->

    <div class="b" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>其他信息</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="计划发车时间">
          <el-date-picker
            v-model="form.plannedDepartureTime"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际发车时间">
          <el-date-picker
            v-model="form.actualDepartureTime"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划到达时间">
          <el-date-picker
            v-model="form.plannedArrivalTime"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际到达时间">
          <el-date-picker
            v-model="form.createdTime"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">保存</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>



</template>
<script>
import { listOperation, getOperation, delOperation, addOperation, updateOperation } from "@/api/operation/operation";
import {addGoods} from "@/api/goods/goods";
import {listGoods} from "../../../api/goods/goods";

export default {
  data() {
    return {
      form: {
        hunum:20,
      },
      tableData: [
        {
          id: 1,
          departure: '河南',
          destination: '上海',
          name: '懒洋洋动力饮料',
          num: 10,
          tj: 0.0672,
          zl: 5.28,
          fentan: 500,
          zxf: 200,
          bzf: 200
        },
        {
          id: 2,
          departure: '北京',
          destination: '广州',
          name: '美洋洋动力饮料',
          num: 10,
          tj: 0.0672,
          zl: 5.28,
          fentan: 500,
          zxf: 200,
          bzf: 200
        },

      ],
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    findGoods() {
      var id = this.$route.query.id;
      getOperation(id).then(response => {
        console.log(response);
        this.form = response.data;
      });
    },
    onSubmit() {
      addOperation(this.form).then(response => {
        this.$modal.msgSuccess("成功");
      });
      this.$router.push({path: '/operation/operation'});
    },
    huowu(){
      listGoods(this.form).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    onCancel(){
      this.$router.push({path: '/operation/operation'});
    }

  },
  created() {
    this.huowu();
    this.findGoods();
    console.log( this.$route.query.id+"....."+(this.$route.query.id!==undefined))
    if(this.$route.query.id!==undefined){
      this.findGoods();
    }
    this.huowu();
  },
}


</script>















